<template>
    <div>
        <a-card style="height: 95vh">
            <a-row class="yy-Row">
                <!-- 查询条件 -->
                <a-form-model
                    layout="inline"
                    :model="queryForm"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                >
                    <a-row>
                        <a-col :span="8">
                            <a-form-model-item :label="$t('menuItem.UserIdOrUserName')" >
                                <a-input
                                    v-model="queryForm.userNameOrUserId"
                                    show-search
                                    :filter-option="filterOption"
                                    allowClear
                                    :placeholder="$t('menuItem.UserIdChoice')"
                                >
                                </a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-model-item :label="$t('menuItem.Dept')">
                                <a-select
                                    v-model="queryForm.deptId"
                                    show-search
                                    allowClear
                                    :placeholder="$t('menuItem.DeptChoice')"
                                    showArrow
                                >
                                    <a-select-option v-for="item in deptList" :key="item.deptId">
                                        {{ item.deptId }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                      <a-col :span="6">
                        <a-form-model-item :label="$t('menuItem.Perssion')">
                          <a-select
                              v-model="queryForm.perssion"
                              show-search
                              allowClear
                              :placeholder="$t('menuItem.PerssionChoice')"
                              showArrow
                          >
                            <a-select-option v-for="item in checkedListByRole" :key="item.id">
                              {{ item.roleName }}
                            </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                </a-form-model>
            </a-row>
            <!-- 按钮 -->
            <a-row class="yy-Row">
                <a-col :span="4">
                    <a-space>
                        <a-button type="primary" v-has="'btn_SEM3100_query'" @click="queryUser">{{$t('menuItem.QueryUser')}}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
            <!-- table展示 -->
            <a-row>
                <a-col :span="24">
                    <m-table
                        :columns="columns"
                        :dataSource="dataSource"
                        :loading="loadTable"
                        bordered
                        :rowKey="(record,index)=>{return index}"
                        :pagination="dataPagination"
                    >
                        <template slot="status" slot-scope="text,record"    v-if="!record.isEmpty">
                            <span :title="text">{{ text === 1 ? '在职' : '离职' }}</span>
                        </template>
                        <template slot="action" slot-scope="text, record" v-if="!record.isEmpty">
                            <div>
                                <span>
                                   <a-button type="primary" size="small" v-has="'btn_SEM3100_assign'"
                                             @click="() => assignPermission(record)"
                                             style="margin-left: 5px;background-color: #63cda5;border-color: #63cda5;">{{$t('menuItem.AssignPerssionGroup')}}</a-button>
                                </span>
                            </div>
                        </template>
                    </m-table>
                </a-col>
            </a-row>
        </a-card>



        <!-- 分配角色 -->
        <a-modal centered
                 width="50%"
                 :visible="controlVisible"
                 :title="$t('menuItem.AssignPerssionGroup')"
                 :okText="$t('menuItem.confirm')"
                 :cancelText="$t('menuItem.cancel')"
                 @ok="disthandleOk"
                 @cancel="disthandleCancel">
            <a-card>
                <a-checkbox-group v-model="checkedValues" class="yy-checkbox">
                    <a-row class="checkbox-top">
                        <a-checkbox v-for="item in checkedListByRole" :key="item.id" :label="item.roleName"
                                    :value="item.id">
                            {{ item.roleName }}
                        </a-checkbox>
                    </a-row>
                </a-checkbox-group>
            </a-card>
        </a-modal>

    </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import MTable from "../../../components/MTable";

export default {
    name: 'UserManage',
    components: {MTable},
    data() {
        return {
          columns: [
            {
              title: this.$t('menuItem.UserTableId'),
              dataIndex: "key",
              key: "key",
              width: 80,
              align: 'center'
            },
            {
              title: this.$t('menuItem.UserTableUserId'),
              dataIndex: 'userId',
              key: 'userId',
              align: 'center'
            },
            {
              title: this.$t('menuItem.UserTableUserName'),
              dataIndex: 'userName',
              key: 'userName',
              align: 'center'
            },
            {
              title: this.$t('menuItem.UserTableStatus'),
              dataIndex: 'status',
              key: 'status',
              align: 'center',
              scopedSlots: {customRender: 'status'},
            },
            {
              title: this.$t('menuItem.UserTableSection'),
              dataIndex: 'section',
              key: 'section',
              align: 'center',
              scopedSlots: {customRender: 'section'},
            },
            {
              title: this.$t('menuItem.UserTableDept'),
              dataIndex: 'deptId',
              key: 'deptId',
              align: 'center',
              scopedSlots: {customRender: 'deptId'},
            },
            {
              title: this.$t('menuItem.UserTablePhone'),
              dataIndex: 'phone',
              key: 'phone',
              align: 'center',
              scopedSlots: {customRender: 'phone'},
            },
            // {
            //   title: this.$t('menuItem.UserTableJob'),
            //   dataIndex: 'job',
            //   key: 'job',
            //   align: 'center',
            //   scopedSlots: {customRender: 'job'},
            // },
            // {
            //   title: this.$t('menuItem.UserTableInJobDate'),
            //   dataIndex: 'inJobDate',
            //   key: 'inJobDate',
            //   align: 'center'
            // },
            {
              title: this.$t('menuItem.UserTableEmail'),
              dataIndex: 'email',
              key: 'email',
              align: 'center',
              scopedSlots: {customRender: 'email'},
            },
            {
              title: this.$t('menuItem.UserTableOperation'),
              dataIndex: 'action',
              key: 'action',
              align: 'center',
              width: 200,
              scopedSlots: {customRender: 'action'},
            },
          ],
            labelCol: {span: 7},
            wrapperCol: {span: 16},
            windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
        }
    },
    computed: {
        ...mapState('js3100', ['dataPagination','queryForm', 'userNameList', 'deptList', 'dataSource',
            'loadTable', 'capvisible', 'capForm', 'controlVisible', 'sectionList',
            'isFlag', 'checkedValueList', 'checkedListByRole', 'statusFormList']),
        // 用户角色多选框选中值
        checkedValues: {
            get() {
                return this.checkedValueList
            },
            set(val) {
                this.setCheckedKeys(val)
            }
        },
    },
    watch: {
        // 监听capvisible，当新增、编辑页面关闭时，清空数据
        '$store.state.js3100.capvisible': {
            deep: true,
            handler(val) {
                if (!val) {
                    this.$refs.capForm.resetFields();
                }
            }
        },
        windowHeight(val){
            this.setTableHeight()
        }
    },
    methods: {
        ...mapMutations('js3100', ['setDataPagination','queryUser', 'queryDeptAndSectionList', 'assignPermission', 'disthandleOk',
            'disthandleCancel', 'setCheckedKeys', 'queryUserNameList','queryRole']),
        // 新增/编辑窗口确定
        addAndEdithandleOk() {
            this.$refs.capForm.validate(valid => {
                if (valid) {
                    this.caphandleOk()
                }
            })
        },
        // 用户名自动转为大写
        toUpper() {
            this.capForm.userName = this.capForm.userName.toUpperCase()
        },
        // 下拉框搜索
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        setTableHeight(){
            let pageSize = parseInt((document.documentElement.clientHeight - 300) / 41)
            this.setDataPagination({
                ...this.dataPagination,
                pageSize: pageSize,
            })
        }
    },
    beforeMount() {
        this.setTableHeight()
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                this.windowHeight = window.fullHeight;
            })();
        };
        // 查询工号/用户名下拉框数据
        this.queryUserNameList()
        // 查询用部门、课数据
        this.queryDeptAndSectionList();
        // 查询table
        this.queryUser()
        //初始化权限下拉框
        this.queryRole()
    },
}
</script>


<style scoped>
.yy-Right {
    display: flex;
    justify-content: flex-end;
}

.yy-Row {
    margin-bottom: 1rem;
}

.yy-checkbox {
    width: 100%;
}

.checkbox-top {
    margin: 1rem 0 1rem 1rem;
}

.checkbox-bottom {
    margin-left: 1rem;
}
</style>
